iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
自我挑戰組

從零開始Vuejs系列 第 17

[Day17] Vue.js 與指令簡單介紹=>v-for

  • 分享至 

  • xImage
  •  

今天是第十七天,我想簡單分享一下v-for這個指令

我們可以透過v-for將陣列顯示在特定的列表當中,
其中v-for指令的值必須使用到item in items這個特殊的語法形式。

來寫程式吧

這裡是HTML的部分

<div id="app">
    <ul>
        <li v-for="(item,index) in items">
            Force {{team}}-Member {{index+1}}-{{item.i}}
        </li>
        <br>
    </ul>
    <ol> 
        <li v-for="item in items">
        {{item.i}}
        </li>
    </ol>
</div>

這裡是JS的部分

<script>
    const app = {
    data(){
        return{
            team:'141',
            items:[
            {i:'Captain Price'},
            {i:'GHOST'},
            {i:'Soap'},
            {i:'GAZ'}
            ]                                      
            }
        }
    }
    Vue.createApp(app).mount('#app')
</script>

這是執行結果
https://ithelp.ithome.com.tw/upload/images/20220929/20151006l0Yxfec7uZ.png

參考文件:
https://vuejs.org/guide/essentials/list.html

v-for就分享到這邊,我們第十八天見


上一篇
[Day16] Vue.js 與指令簡單介紹=>v-if ,v-else,v-else-if的實作應用與v-show
下一篇
[Day18] v-if on <template> & v-for on <template>
系列文
從零開始Vuejs30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言